<template>
  <div id="receivableDetail">
    <div class="topxuhao">应收账款序号{{baseInfo.sNo}}</div>
    <div class="messageSwdy">基础交易合同</div>
    <div class="tableBox">
      <table class="leave">
        <tr>
          <td>合同名称</td>
          <td>
            <el-input size="small" v-model="data.contractName"></el-input>
          </td>
          <td>合同编号</td>
          <td>
            <el-input size="small" v-model="data.contractNo"></el-input>
          </td>
        </tr>
        <tr>
          <td>买方名称</td>
          <td>
            <el-input size="small" v-model="data.buyName" disabled style="width: calc(100% - 64px); display: inline-block;"></el-input>
            <el-button type="primary" size="mini" @click="choose('buy')">选择</el-button>
          </td>
          <td>买方地址</td>
          <td class="dizhi one">
            <el-select v-model="shengvalue" placeholder="请选择" size="small" @change="changeSheng">
              <el-option v-for="item in shengOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="shivalue" placeholder="请选择" size="small">
              <el-option v-for="item in shiOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-input size="small" v-model="buyaddress" placeholder="请选择省市并填入地址" @blur="maiadd"></el-input>
          </td>
        </tr>
        <tr>
          <td>卖方名称</td>
          <td>
            <el-input size="small" v-model="data.sellName" disabled style="width: calc(100% - 64px); display: inline-block;"></el-input>
            <el-button type="primary" size="mini" @click="choose('sell')">选择</el-button>
          </td>
          <td>卖方地址</td>
          <td class="dizhi">
            <el-select v-model="shengvalue1" placeholder="请选择" size="small" @change="changeSheng1">
              <el-option v-for="item in shengOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="shivalue1" placeholder="请选择" size="small">
              <el-option v-for="item in shiOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-input size="small" v-model="shouaddress" placeholder="请选择省市并填入地址" @blur="shouadd"></el-input>
          </td>
        </tr>
        <tr>
          <td>起始日期</td>
          <td>
            <el-date-picker v-model="data.startDate" type="date" placeholder="选择日期" size="small" value-format="yyyy-MM-dd"></el-date-picker>
          </td>
          <td>完工日期</td>
          <td>
            <el-date-picker v-model="data.endDate" type="date" placeholder="选择日期" size="small" value-format="yyyy-MM-dd"></el-date-picker>
          </td>
        </tr>
        <tr>
          <td>合同金额</td>
          <td>
            <el-input size="small" v-model="data.contractAmount"></el-input>
          </td>
          <td>已付账款</td>
          <td>
            <el-input size="small" v-model="data.paid"></el-input>
          </td>
        </tr>
        <tr>
          <td>基础交易类型</td>
          <td>
            <el-input size="small" v-model="data.baseType"></el-input>
          </td>
          <td>所属区域</td>
          <td class="dizhi">
            <el-select v-model="shengvalue2" placeholder="请选择" size="small" @change="changeSheng2">
              <el-option v-for="item in shengOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="shivalue2" placeholder="请选择" size="small" @change="changeShi2">
              <el-option v-for="item in shiOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>项目名称</td>
          <td>
            <el-input size="small" v-model="data.projectName"></el-input>
          </td>
          <td>供应商行业属性</td>
          <td>
            <el-date-picker v-model="data.supplierType" type="date" placeholder="选择日期" size="small"></el-date-picker>
          </td>
        </tr>
      </table>
    </div>
    <div class="messageSwdy">应收款交易信息</div>
    <div class="tableBox">
      <table class="leave">
        <tr>
          <td>支付申请编号</td>
          <td>
            <el-input size="small" v-model="data.payRequestNo"></el-input>
          </td>
          <td>支付申请金额</td>
          <td>
            <el-input size="small" v-model="data.payRequestAmount"></el-input>
          </td>
        </tr>
        <tr>
          <td>支付审批编号</td>
          <td>
            <el-input size="small" v-model="data.payRequestApprovalNo"></el-input>
          </td>
          <td>确认应收款金额</td>
          <td>
            <el-input size="small" v-model="data.checkPayAmount"></el-input>
          </td>
        </tr>
        <tr>
          <td>利息内扣</td>
          <td>
            <el-radio-group v-model="data.interestDeduction">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </td>
          <td>进度款比例</td>
          <td>
            <el-input size="small" v-model="data.progressRate"></el-input>
          </td>
        </tr>
        <tr>
          <td>应收款起止日</td>
          <td>
            <el-date-picker v-model="data.payStartDate" type="date" placeholder="选择日期" size="small"></el-date-picker>
          </td>
          <td>定金</td>
          <td>
            <el-input size="small" v-model="data.earnestMoney"></el-input>
          </td>
        </tr>
        <tr>
          <td>应收账款</td>
          <td>
            <el-input size="small" v-model="data.payAmount"></el-input>
          </td>
          <td>融资比例</td>
          <td>
            <el-input size="small" v-model="data.financeRate"></el-input>
          </td>
        </tr>
        <tr>
          <td>债务人付款确认书编号</td>
          <td>
            <el-input size="small" v-model="data.payConfirmNo"></el-input>
          </td>
          <td>债务人主体付款确认书编号</td>
          <td>
            <el-input size="small" v-model="data.mainPayConfirmNo"></el-input>
          </td>
        </tr>
        <tr>
          <td>融资金额</td>
          <td>
            <el-input size="small" v-model="data.financeAmount"></el-input>
          </td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
    <div class="messageSwdy">供应商收款账户</div>
    <div class="tableBox">
      <table class="leave">
        <tr>
          <td>账户名</td>
          <td>
            <el-input size="small" v-model="data.accountName"></el-input>
          </td>
        </tr>
        <tr>
          <td>开户银行</td>
          <td>
            <el-input size="small" v-model="data.bank"></el-input>
          </td>
        </tr>
        <tr>
          <td>账号</td>
          <td>
            <el-input size="small" v-model="data.account"></el-input>
          </td>
        </tr>
      </table>
    </div>
    <div class="messageSwdy">供应商联系信息</div>
    <div class="tableBox">
      <table class="leave">
        <tr>
          <td>姓名</td>
          <td>
            <el-input size="small" v-model="data.name"></el-input>
          </td>
          <td>手机号码</td>
          <td>
            <el-input size="small" v-model="data.phone"></el-input>
          </td>
        </tr>
        <tr>
          <td>传真号码</td>
          <td>
            <el-input size="small" v-model="data.fax"></el-input>
          </td>
          <td>通讯地址</td>
          <td class="dizhi">
            <el-select v-model="shengvalue3" placeholder="请选择" size="small" @change="changeSheng3">
              <el-option v-for="item in shengOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="shivalue3" placeholder="请选择" size="small">
              <el-option v-for="item in shiOption" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-input
              size="small"
              v-model="tongxunaddress"
              placeholder="请选择省市并填入地址"
              @blur="tongxun"
            ></el-input>
          </td>
        </tr>
      </table>
    </div>
    <div class="messageSwdy">费用计收</div>
    <div class="tableBox">
      <table class="leave">
        <tr>
          <td>保理天数(天)</td>
          <td>
            <el-input size="small" v-model="data.factorDays"></el-input>
          </td>
        </tr>
        <tr>
          <td>费率（折价率）%</td>
          <td>
            <el-input size="small" v-model="data.feeRate"></el-input>
          </td>
        </tr>
        <tr>
          <td>融资利息</td>
          <td>
            <el-input size="small" v-model="data.financeInterest"></el-input>
          </td>
        </tr>
      </table>
    </div>
    <div class="messageSwdy">付款审批表</div>
    <div class="tableBox">
      <table class="vertatic">
        <tr>
          <td>序号</td>
          <td>附件名称</td>
          <td>审批日期</td>
          <td>操作</td>
        </tr>
        <tr v-for="(item, index) in fukuanData" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.attName}}</td>
          <td>{{item.appDate | dateformat}}</td>
          <td>
            <span class="red" @click="yulan(item.path)">预览</span>
            <span class="red" @click="del(item)">删除</span>
          </td>
        </tr>
        <tr v-if="fukuanData.length == 0" style="text-align:center;">
          <td colspan="4">暂无数据</td>
        </tr>
      </table>
      <div class="btnfile">
        <button @click="portrait">上传</button>
        <input type="file" class="img_input" ref="portrait" @change="selectfile">
      </div>
    </div>
    <div class="messageSwdy">基础交易票据</div>
    <div class="tableBox">
      <table class="vertatic">
        <tr>
          <td>ID</td>
          <td>票据编号</td>
          <td>票据名称</td>
          <td>开票日期</td>
          <td>附件名称</td>
          <td>转让金额</td>
          <td>发票金额</td>
          <td>核实</td>
          <td>中登网登记次数</td>
          <td>客户上传</td>
          <td>乐税查验</td>
          <td>OCR识别</td>
          <!-- <td>更新时间</td> -->
          <td>操作</td>
        </tr>
        <tr v-for="(item, index) in tradeReceiptList" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.recNo}}</td>
          <td>{{item.recName}}</td>
          <td>{{item.invDate | dateformat}}</td>
          <td>{{item.attName}}</td>
          <td>{{item.tansAmount}}</td>
          <td>{{item.invAmount}}</td>
          <td>{{item.isVerify == 1? '已核实': '未核实'}}</td>
          <td>{{item.zdTime}}</td>
          <td>{{item.isClientUpload ==1? '是':'否'}}</td>
          <td style="color:#E64545;">{{item.lsCheck ==1? '已查验': '未查验'}}</td>
          <td style="color:#E64545;">{{item.ocrState==1? '已识别': '未识别'}}</td>
          <!-- <td></td> -->
          <td>
            <span style="color:#1E7CF0;" @click="fapCy(item)">查验</span>
          </td>
        </tr>
        <tr v-if="tradeReceiptList.length == 0" style="text-align:center;">
          <td colspan="13">暂无数据</td>
        </tr>
      </table>
      <div style="margin-top: 20px;">
        <span>票据金额合计：</span>
        <span style="color:red; margin-right: 30px;">¥{{baseInfo.receiptTotal? baseInfo.receiptTotal: '0'}}</span>
        <span>转让金额合计：</span>
        <span style="color:red; margin-right: 30px;">¥{{baseInfo.transTotal? baseInfo.transTotal : '0' }}</span>
        <span>应收款到期日：</span>
        <span>{{baseInfo.payEndDate}}</span>
      </div>
    </div>
    <div class="messageSwdy">支付凭证</div>
    <div class="tableBox">
      <table class="vertatic">
        <tr>
          <td>ID</td>
          <td>凭证编号</td>
          <td>金额</td>
          <td>凭证日期</td>
          <td>描述</td>
          <td>操作</td>
        </tr>
        <tr v-for="(item, index) in pingzList" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.evidenceNo}}</td>
          <td>{{item.amount}}</td>
          <td>{{item.docDate | dateformat }}</td>
          <td>{{item.docDesc}}</td>
          <td>  
            <span class="red" @click="delpingz(item.peId)">删除</span>
          </td>
        </tr>
        <tr v-if="pingzList.length == 0" style="text-align:center;">
          <td colspan="6">暂无数据</td>
        </tr>
      </table>
      <div style="margin-top: 20px;">
        <span>票据金额合计：</span>
        <span style="color:red; margin-right: 30px;">¥{{pingsum}}</span>
      </div>
      <div class="btnfile">
        <button @click="portrait1">上传</button>
        <input type="file" class="img_input" ref="portrait1" @change="selectfile1">
      </div>
    </div>
    <div class="messageSwdy">应收款附件</div>
    <div class="tableBox">
      <table class="vertatic">
        <tr>
          <td>ID</td>
          <td>附件类型</td>
          <td>文件名称</td>
          <td>上传用户</td>
          <td>上传时间</td>
          <td>操作</td>
        </tr>
        <tr v-for="(item, index) in receiveAttachmentList" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.attType}}</td>
          <td>{{item.title}}</td>
          <td>{{item.uploadUser}}</td>
          <td>{{item.uploadDate}}</td>
          <td>
            <span class="red" @click="downlondFile(item)">下载</span>
          </td>
        </tr>
        <tr v-if="receiveAttachmentList.length == 0" style="text-align:center;">
          <td colspan="6">暂无数据</td>
        </tr>
      </table>
    </div>
    <div class="bottomBtn">
      <button @click="submit">提交</button>
    </div>
    <!-- ----------------------------------- -->
    <el-dialog :visible.sync="dialogTable" width="900px">
      <div class="swdyTops">
        <span class="search">搜索公司：</span>
        <el-input class="elinput" size="small" placeholder="请输入公司关键字"></el-input>
        <span class="sousuo">搜索不到？</span>
        <el-button class="gocreat" size="small" type="primary">去创建</el-button>
      </div>
      <div class="diatable">
        <el-table :data="diatableData" border style="width: 100%">
          <el-table-column prop="date" label="序号" width="180" align="center"></el-table-column>
          <el-table-column prop="name" label="客户名称" width="180" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="look">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="total, prev, pager, next, jumper"
            :total="400"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
    <!-- ----------添加付款审核表------------ -->
    <el-dialog
      :visible.sync="dialogfukuan"
      center
      title="添加付款审批表"
      width="900px"
      :before-close="handleClose"
    >
      <el-row class="swelrow">
        <el-col :span="5" class="left">附件名称：</el-col>
        <el-col :span="16">
          <el-input size="small" v-model="diafukuan.name"></el-input>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="5" class="left">审批日期：</el-col>
        <el-col :span="16">
          <el-date-picker
            v-model="diafukuan.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-col>
      </el-row>
      <div class="btnfukuan">
        <el-button type="primary" @click="subfukuan">提交</el-button>
      </div>
    </el-dialog>
    <!-- ----------添加支付凭证------------ -->
    <el-dialog
      :visible.sync="dialogPingz"
      center
      title="添加支付凭证"
      width="900px"
      :before-close="handleClose"
    >
      <el-row class="swelrow">
        <el-col :span="5" class="left">凭证编号：</el-col>
        <el-col :span="16">
          <el-input size="small" v-model="diaPingz.evidenceNo"></el-input>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="5" class="left">金额：</el-col>
        <el-col :span="16">
          <el-input size="small" v-model="diaPingz.amount"></el-input>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="5" class="left">凭证日期：</el-col>
        <el-col :span="16">
          <el-date-picker
            v-model="diaPingz.documentDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="5" class="left">描述：</el-col>
        <el-col :span="16">
          <el-input size="small" v-model="diaPingz.documentDesc"></el-input>
        </el-col>
      </el-row>
      <div class="btnfukuan">
        <el-button type="primary" @click="subPingz">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cityData from "../../assets/js/city.js";
import $axios from "axios";
export default {
  name: "receivableDetail",
  data() {
    return {
      dialogTable: false,
      dialogfukuan: false,
      dialogPingz: false,
      diatableData: "",
      currentPage: "",
      data: {
        sNo: "", // string 应收账款序号
        contractName: "", // string 合同名称
        contractNo: "", // string 合同编号
        buyName: "", // string 买方名称
        buyAddress: "", // string 买方地址
        sellName: "", // string 卖方名称
        sellAddress: "", // string 卖方地址
        startDate: "", // Date 起始日期
        endDate: "", // Date 完工日期
        contractAmount: "", // string 合同金额
        paid: "", // string 已付账款
        baseType: "", // string 基础交易类型
        area: "", // string 所属区域
        projectName: "", // string 项目名称
        projectId: "", // string 项目Id
        supplierType: "", // string 供应商行业属性
        payRequestNo: "", // string 支付申请编号
        payRequestAmount: "", // string 支付申请金额
        payRequestApprovalNo: "", // string 支付审批编号
        checkPayAmount: "", // string 确认应收款金额
        interestDeduction: '', // string 利息内扣
        progressRate: "", // string 进度款比例
        payStartDate: "", // string 应收款起止日
        earnestMoney: "", // string 定金
        payAmount: "", // string 应收账款
        financeRate: "", // string 融资比例
        financeAmount: "", // string 融资金额
        payConfirmNo: "", // string 债务人付款确认书编号
        mainPayConfirmNo: "", // string 债务人主体付款确认书编号
        accountName: "", // string 账户名
        bank: "", // string 开户银行
        account: "", // string 账号
        name: "", // string 姓名
        phone: "", // string 手机号码
        fax: "", // string 传真号码
        address: "", // string 通讯地址
        factorDays: "", // string 保理天数
        feeRate: "", // string 费率（折价率）
        financeInterest: "", // string 融资利息
        paymentApprovalList: "", // List<String> 付款审批表Id List
        tradeReceiptList: "", // List<String> 基础交易票据id List
        paymentEvidenceList: "", // List<String> 付凭证id List
        receiveAttachmentList: "" // List<String> 应收款附件id List
      },
      city: "",
      shengvalue: "",
      shengvalue1: "",
      shengvalue2: "",
      shengvalue3: "",
      shengOption: [],
      shivalue: "",
      shivalue1: "",
      shivalue2: "",
      shivalue3: "",
      shiOption: [],
      value1: "",
      buyaddress: "", //买方地址
      shouaddress: "", //卖方地址
      tongxunaddress: "", //通讯地址
      // 添加付款审核表
      diafukuan: {
        name: "",
        date: ""
      },
      file: "",
      fukuanData: [],
      // 添加支付凭证
      diaPingz: {
        evidenceNo: "",
        amount: "",
        documentDate: "",
        documentDesc: ""
      },
      file1: "",
      pingzList: [],
      pingsum: 0,
      baseInfo: '',
      receiveAttachmentList: '',//应收款附件列表
      tradeReceiptList: '', //基础交易票据
    };
  },
  mounted() {
    this.getsheng();
    // this.fukuanList();
    this.getPingzList();
    this.getdata();
  },
  methods: {

    fapCy (item) {
      let obj = {
        invoiceCode: item.invoiceCode,
        invoiceNumber: item.invoiceNumber,
        billTime: item.billTime,
        checkCode: item.checkCode,
      };
      this.axios.post('AdminAPI/leShui/checkInvoice',obj)
        .then(({data})=> {
          var dataO = {};
          var arr = Object.keys(dataO);
          if (arr.length == 0) {  
            this.$message.error('查验失败');
            return false;
          }
          if (data.data.RtnCode == '1000') {
            this.$message({message: '查验成功',type: 'success'});
          }
        })
    },
    choose (pam) {
      this.$bus.$emit("chooseCompany", {
        callback: (data) => {
         if (pam == 'buy') {
           this.data.buyName = data;
         }
         if (pam == 'sell') {
           this.data.sellName = data;
         } 
        }
      });
    },
    downlondFile (item) {
      let url = this.$bus.baseURL+'AdminAPI'+'item.path';
      var aLink = document.createElement("a");
      aLink.style.display = "none";
      aLink.href = url;
      aLink.setAttribute("download", decodeURI(item.title));
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink);
    },
    getdata() {
      this.axios.get('AdminAPI/accountReceive/showAccountReceiveInfo',{params: {id: this.$route.query.id}})
        .then(({data})=> {
          let baseinfo = data.data.baseInfo;
          for (let k in baseinfo) {
            this.data[k]=baseinfo[k];
          }
          if (baseinfo.interestDeduction ) {
            this.data.interestDeduction = baseinfo.interestDeduction-0;
          }
          if (baseinfo.buyAddress) {
            let arr = baseinfo.buyAddress.split('&&');
            this.shengvalue = arr[0];
            this.changeSheng();
            this.shivalue = arr[1];
            this.buyaddress = arr[2]
          }
          if (baseinfo.sellAddress) {
            let arr = baseinfo.sellAddress.split('&&');
            this.shengvalue1 = arr[0];
            this.changeSheng1();
            this.shivalue1 = arr[1];
            this.shouaddress = arr[2]
          }
          if (baseinfo.area) {
            let arr = baseinfo.area.split('&&');
            this.shengvalue2 = arr[0];
            this.changeSheng2();
            this.shivalue2 = arr[1];
          }
          if (baseinfo.address) {
            let arr = baseinfo.address.split('&&');
            this.shengvalue3 = arr[0];
            this.changeSheng3();
            this.shivalue3 = arr[1];
            this.tongxunaddress = arr[2];
          }
          this.baseInfo= data.data.baseInfo;
          this.fukuanData =data.data.paymentApprovalList;  //付款审批表
          this.tradeReceiptList = data.data.tradeReceiptList; //基础交易票据
          this.pingzList = data.data.paymentEvidenceList; // 支付凭证
          this.receiveAttachmentList = data.data.receiveAttachmentList; //应收款附件列表
        })
    },
    delpingz(id) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios
            .post("AdminAPI/paymentEvidence/deletePaymentEvidence", { id: id })
            .then(({ data }) => {
              if (data.code == 200) {
                this.$message({ message: "删除成功", type: "success" });
                this.getPingzList();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getPingzList() {
      let sum = 0;
      this.axios
        .get("AdminAPI/paymentEvidence/getPaymentEvidenceList", {
          params: {
            clientId: this.$route.query.clientId - 0,
            projectId: sessionStorage.getItem("swdypId") - 0
          }
        })
        .then(({ data }) => {
          this.pingzList = data.data;
          data.data.forEach(ele => {
            sum = ele.amount - 0 + sum;
          });
          this.pingsum = sum;
        });
    },
    del(item) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios
            .post("AdminAPI/paymentApproval/deletePaymentApproval", {
              id: item.paId
            })
            .then(({ data }) => {
              if (data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.fukuanList();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    subPingz() {
      let params = this.diaPingz;
      for (let k in params) {
        if (!params[k]) {
          this.$message({ message: "请您填写完整", type: "warning" });
          return false;
        }
      }
      let fm = new window.FormData(); // 创建一个表单
      fm.append("file", this.file1);
      fm.append("clientId", this.$route.query.clientId - 0);
      fm.append("projectId", sessionStorage.getItem("swdypId") - 0);
      fm.append("evidenceNo", this.diaPingz.evidenceNo);
      fm.append("amount", this.diaPingz.amount);
      fm.append("documentDate", this.diaPingz.documentDate);
      fm.append("documentDesc", this.diaPingz.documentDesc);
      $axios
        .post(
          `${this.$bus.baseURL}AdminAPI/paymentEvidence/addPaymentEvidence`,
          fm,
          {
            headers: { "Content-Type": "multipart/form-data" },
            token: sessionStorage.getItem("token")
          }
        )
        .then(({ data }) => {
          if (data.code == 200) {
            this.$message({ message: "提交成功", type: "success" });
            this.getPingzList();
            this.dialogPingz = false;
            for (let k in params) {
              params[k] = "";
            }
          }
        });
    },
    subfukuan() {
      if (!this.diafukuan.name || !this.diafukuan.date) {
        this.$message({ message: "请您填写完整", type: "warning" });
        return false;
      }
      let obj = {
        attachmentName: this.diafukuan.name,
        approvalDate: this.diafukuan.date,
        projectId: sessionStorage.getItem("swdypId") - 0,
        clientId: this.$route.query.clientId - 0
      };
      let fm = new window.FormData(); // 创建一个表单
      fm.append("file", this.file); // apend到这个字段,后台凭证接受的字段
      $axios
        .post(
          `${this.$bus.baseURL}AdminAPI/paymentApproval/addPaymentApprovalFile`,
          fm,
          {
            headers: { "Content-Type": "multipart/form-data" },
            token: sessionStorage.getItem("token")
          }
        )
        .then(({ data }) => {
          if (data.code == 200) {
            obj.path = data.data;
            this.axios
              .post("AdminAPI/paymentApproval/addPaymentApproval", obj)
              .then(({ data }) => {
                if (data.code == 200) {
                  this.$message({ message: "提交成功", type: "success" });
                  this.dialogfukuan = false;
                  this.clearFile();
                  this.fukuanList();
                }
              });
          } else {
            this.$message({
              message: data.message,
              type: "warning"
            });
          }
        });
    },
    // 查看付款审核表
    fukuanList() {
      this.axios
        .get("AdminAPI/paymentApproval/getPaymentApprovalList", {
          params: {
            clientId: this.$route.query.clientId - 0,
            projectId: sessionStorage.getItem("swdypId") - 0
          }
        })
        .then(({ data }) => {
          this.fukuanData = data.data;
        });
    },
    portrait: function() {
      this.$refs.portrait.click(); // 获取ref为portrait的元素相当于获取id为portrait的元素
    },
    selectfile: function(e) {
      this.file = e.target.files[0]; // 获取文件的所有属性
      this.diafukuan.name = e.target.files[0].name;
      this.dialogfukuan = true;
    },
    portrait1: function() {
      this.$refs.portrait1.click(); // 获取ref为portrait的元素相当于获取id为portrait的元素
    },
    selectfile1: function(e) {
      this.file1 = e.target.files[0]; // 获取文件的所有属性
      this.dialogPingz = true;
    },
    getsheng() {
      let data = cityData[86];
      let shengOption = [];
      for (let k in data) {
        shengOption.push(data[k]);
      }
      this.shengOption = shengOption;
    },
    changeSheng() {
      this.shivalue = "";
      let data = cityData[86];
      let shengKey = "";
      for (let k in data) {
        if (data[k] == this.shengvalue) {
          shengKey = k;
        }
      }
      let shidata = cityData[shengKey];
      let shiOption = [];
      for (let k in shidata) {
        shiOption.push(shidata[k]);
      }
      this.shiOption = shiOption;
    },
    changeSheng1() {
      this.shivalue1 = "";
      let data = cityData[86];
      let shengKey = "";
      for (let k in data) {
        if (data[k] == this.shengvalue1) {
          shengKey = k;
        }
      }
      let shidata = cityData[shengKey];
      let shiOption = [];
      for (let k in shidata) {
        shiOption.push(shidata[k]);
      }
      this.shiOption = shiOption;
    },
    changeSheng2() {
      this.shivalue2 = "";
      let data = cityData[86];
      let shengKey = "";
      for (let k in data) {
        if (data[k] == this.shengvalue2) {
          shengKey = k;
        }
      }
      let shidata = cityData[shengKey];
      let shiOption = [];
      for (let k in shidata) {
        shiOption.push(shidata[k]);
      }
      this.shiOption = shiOption;
    },
    changeSheng3() {
      this.shivalue3 = "";
      let data = cityData[86];
      let shengKey = "";
      for (let k in data) {
        if (data[k] == this.shengvalue3) {
          shengKey = k;
        }
      }
      let shidata = cityData[shengKey];
      let shiOption = [];
      for (let k in shidata) {
        shiOption.push(shidata[k]);
      }
      this.shiOption = shiOption;
    },
    maiadd() {
      if (this.buyaddress && this.shengvalue && this.shivalue) {
        this.data.buyAddress =
          this.shengvalue + "&&" + this.shivalue + "&&" + this.buyaddress;
      }
    },
    shouadd() {
      if (this.shouaddress && this.shengvalue && this.shivalue) {
        this.data.sellAddress =
          this.shengvalue1 + "&&" + this.shivalue1 + "&&" + this.shouaddress;
      }
    },
    changeShi2() {
      if (this.shengvalue2 && this.shivalue2) {
        this.data.area = this.shengvalue2 + "&&" + this.shivalue2;
      }
    },
    handleCurrentChange() {},
    tongxun() {
      if (this.tongxunaddress && this.shengvalue3 && this.shivalue3) {
        this.data.address =
          this.shengvalue3 + "&&" + this.shivalue3 + "&&" + this.tongxunaddress;
      }
    },
    submit() {
      let obj = this.data;
      obj.paymentApprovalList = this.fukuanData;
      obj.tradeReceiptList = this.tradeReceiptList;
      obj.paymentEvidenceList = this.pingzList;
      obj.receiveAttachmentList = this.receiveAttachmentList;      
      this.axios.post("AdminAPI/accountReceive/addAccountReceive", obj).then(({ data }) => {
        this.$message({ message: "提交成功", type: "success" });
        // this.$route.go(-1);
      });
    },
    handleClose(done) {
      // document.getElementById('file');
      this.clearFile();
      done();
    },
    clearFile() {
      this.diafukuan.date = "";
      let file = this.$refs.portrait;
      file.value = "";
    },
    yulan(imgPath) {
      if (!imgPath) {
        this.$message({message: '文件路径有误',type: 'warning'});
        return false;
      }
        let url = this.$viewImg+imgPath;
        var aLink = document.createElement("a");
        aLink.style.display = "none";
        aLink.href = url;
        aLink.setAttribute("download", decodeURI(name));
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink); //下载完成移除元素
        // window.URL.revokeObjectURL(url); //释放掉blob对象
      // this.$bus.$emit("alertImg", { voucherImg: imgPath });
    }
  }
};
</script>

<style lang="scss">
#receivableDetail {
  .el-date-editor.el-input {
    width: 100%;
  }
  .messageSwdy {
    margin-top: 0 !important;
  }
  .topxuhao {
    margin: 20px 0;
    height: 50px;
    background: rgba(201, 3, 3, 0.58);
    text-align: center;
    color: white;
    font-size: 22px;
    font-weight: bold;
    line-height: 50px;
  }
  .tableBox {
    background: white;
    padding: 48px 76px;
    .leave {
      width: 100%;
      border-collapse: collapse;
      color: #333333;
      tr {
        border: 1px solid #dfdcdf;
        td {
          text-align: center;
          border: 1px solid #dfdcdf;
          padding: 8px 10px;
          &:nth-child(odd) {
            background: #fffaf3;
          }
          &.dizhi {
            display: flex;
            border: none;
            .el-select {
              margin-right: 20px;
            }
          }
        }
      }
    }
    .vertatic {
      width: 100%;
      border-collapse: collapse;
      color: #333333;
      tr {
        &:first-child {
          td {
            background: #fffaf3;
          }
        }
        td {
          text-align: center;
          border: 1px solid #dfdcdf;
          padding: 16px 0;
          .red {
            color: #e64545;
            cursor: pointer;
          }
        }
      }
    }
  }
  .bottomBtn {
    text-align: center;
    padding: 30px 0;
    button {
      width: 632px;
      height: 50px;
      background: rgba(242, 146, 7, 1);
      box-shadow: 0px 0px 6px 0px rgba(122, 121, 121, 0.5);
      border-radius: 10px;
      cursor: pointer;
      font-size: 22px;
      color: rgba(255, 255, 255, 1);
    }
  }
  .swdyTops {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #b9b9b9;
    padding-bottom: 26px;
    .el-input {
      width: 160px;
    }
    .sousuo {
      margin: 0 40px;
    }
  }
  .diatable {
    margin-top: 10px;
    background: white;
    padding-top: 16px;
    .has-gutter tr th {
      background: #fefaf1;
    }
    .block {
      text-align: right;
      margin-right: 55px;
      height: 50px;
      margin-top: 20px;
    }
  }
  .btnfile {
    text-align: center;
    margin-top: 20px;
    button {
      cursor: pointer;
      width: 334px;
      height: 40px;
      background: rgba(30, 124, 240, 1);
      border-radius: 6px;
      font-size: 20px;
      color: white;
    }
    .img_input {
      position: absolute;
      left: -2000px;
      top: -100px;
    }
  }
  .swelrow {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .left {
      text-align: right;
    }
    .el-input {
      width: 100%;
    }
  }
  .btnfukuan {
    margin-top: 40px;
    text-align: center;
  }
}
</style>
